<template>
	<view class="mark">


		<view class="content">
			<!-- logo -->
			<view class="logo"
				:style="{'top':logo.top?logo.top+'rpx':'0','left':logo.leftValue?logo.leftValue+'rpx':'0'}">
				<img :src="logo.imageUrl"></img>
			</view>
			<view class="reqiqiu" @tap="gotoTeam" v-for="(i,index) in buttonList" :key="index" v-if="i.value==25"
				:style="{'top':i.top?i.top+'rpx':'0','left':i.leftValue?i.leftValue+'rpx':'0'}">
				<img :src="qiqiuButton.reqiqiu"></img>
			</view>
			<view class="tuandui-arr">
				<view class="quanjiafu">

				</view>
			</view>
			<view class="long">
				<view class="guaiwu01"
					:style="{'top':guaiwu01.top?guaiwu01.top+'rpx':'0','left':guaiwu01.leftValue?guaiwu01.leftValue+'rpx':'0'}">
					<img :src="guaiwu01.imageUrl"></img>
				</view>
				<view class="shipin">
					<view class="shipin-box">
						<image src="https://qingchenghai-1.oss-cn-hangzhou.aliyuncs.com/static/shipin.png"
							class="pic pic-abslo" @tap="shouyeshipin(2)">
						</image>
						<view class="bofangjian" @tap="playVideo">

						</view>
						<video :src="homeVideo" id="myVideo" :controls="false" class="shipin-v"></video>
					</view>

				</view>
			</view>
			<view class="shu">
				<view class="dianti"
					:style="{'top':dianti.top?dianti.top+'rpx':'0','left':dianti.leftValue?dianti.leftValue+'rpx':'0'}">
					<img :src="dianti.imageUrl"></img>
				</view>
				<view class="fangzi01">

				</view>
				<view class="huojian">

				</view>
				<view class="fangzi02">
					<view class="guaiwu02"
						:style="{'top':guaiwu02.top?guaiwu02.top+'rpx':'0','left':guaiwu02.leftValue?guaiwu02.leftValue+'rpx':'0'}">
						<img :src="guaiwu02.imageUrl"></img>
					</view>
					<view class="qiqiulanzi"
						:style="{'top':qiqiulanzi.top?qiqiulanzi.top+'rpx':'0','left':qiqiulanzi.leftValue?qiqiulanzi.leftValue+'rpx':'0'}">
						<img :src="qiqiulanzi.imageUrl"></img>
					</view>
					<view class="shuguan">

					</view>
				</view>
				<view class="zhishengji"
					:style="{'top':zhishengji.top?zhishengji.top+'rpx':'0','left':zhishengji.leftValue?zhishengji.leftValue+'rpx':'0'}">
					<img :src="zhishengji.imageUrl"></img>
				</view>
				<view class="fangzi03">
					<view class="hudie"
						:style="{'top':hudie.top?hudie.top+'rpx':'0','left':hudie.leftValue?hudie.leftValue+'rpx':'0'}">
						<img :src="hudie.imageUrl"></img>
					</view>
					<view class="qiqiu01" @tap="xiaolongdanni"
						:style="{'top':qiqiu01.top?qiqiu01.top+'rpx':'0','left':qiqiu01.leftValue?qiqiu01.leftValue+'rpx':'0'}">
						<img :src="qiqiu01.beginStatusUrl" alt="">
					</view>
					<view class="qiqiu02" @tap="meilongzhen"
						:style="{'top':qiqiu02.top?qiqiu02.top+'rpx':'0','left':qiqiu02.leftValue?qiqiu02.leftValue+'rpx':'0'}">
						<img :src="qiqiu02.beginStatusUrl" alt="">
					</view>
					<view class="qiqiu03" @tap="erlingba"
						:style="{'top':qiqiu03.top?qiqiu03.top+'rpx':'0','left':qiqiu03.leftValue?qiqiu03.leftValue+'rpx':'0'}">
						<img :src="qiqiu03.beginStatusUrl" alt="">
					</view>
					<view class="qiqiu04" @tap="moreVideo"
						:style="{'top':qiqiu04.top?qiqiu04.top+'rpx':'0','left':qiqiu04.leftValue?qiqiu04.leftValue+'rpx':'0'}">
						<img :src="qiqiu04.beginStatusUrl" alt="">
					</view>
					<view class="guaiwu03"
						:style="{'top':guaiwu03.top?guaiwu03.top+'rpx':'0','left':guaiwu03.leftValue?guaiwu03.leftValue+'rpx':'0'}">
						<img :src="guaiwu03.imageUrl"></img>
					</view>
				</view>
				<view class="haidaochuan">
					<view class="guaiwu05"
						:style="{'top':guaiwu05.top?guaiwu05.top+'rpx':'0','left':guaiwu05.leftValue?guaiwu05.leftValue+'rpx':'0'}">
						<img :src="guaiwu05.imageUrl"></img>
					</view>
				</view>
				<view class="dongwuqun">
					<view class="changjinglu" @tap="gotoYuanxiao"
						:style="{'top':changjinglu.top?changjinglu.top+'rpx':'0','left':changjinglu.leftValue?changjinglu.leftValue+'rpx':'0'}">
						<img :src="changjinglu.beginStatusUrl"></img>
					</view>
					<view class="zhaopin" @tap="qiyeANDzhaopin(16)"
						:style="{'top':zhaopin.top?zhaopin.top+'rpx':'0','left':zhaopin.leftValue?zhaopin.leftValue+'rpx':'0'}">
						<img :src="zhaopin.beginStatusUrl"></img>
					</view>
					<view class="guaiwu04"
						:style="{'top':guaiwu04.top?guaiwu04.top+'rpx':'0','left':guaiwu04.leftValue?guaiwu04.leftValue+'rpx':'0'}">
						<img :src="guaiwu04.imageUrl"></img>
					</view>
					<view class="qiyezizhi" @tap="qiyeANDzhaopin(15)"
						:style="{'top':qiyezizhi.top?qiyezizhi.top+'rpx':'0','left':qiyezizhi.leftValue?qiyezizhi.leftValue+'rpx':'0'}">
						<img :src="qiyezizhi.beginStatusUrl"></img>
					</view>
					<view class="banma" @tap="gotoJiaoYu"
						:style="{'top':banma.top?banma.top+'rpx':'0','left':banma.leftValue?banma.leftValue+'rpx':'0'}">
						<img :src="banma.beginStatusUrl"></img>
					</view>
					<view class="xiong" @tap="gotoAbout"
						:style="{'top':xiong.top?xiong.top+'rpx':'0','left':xiong.leftValue?xiong.leftValue+'rpx':'0'}">
						<img :src="xiong.beginStatusUrl"></img>
					</view>

					<view class="laohu"
						:style="{'top':laohu.top?laohu.top+'rpx':'0','left':laohu.leftValue?laohu.leftValue+'rpx':'0'}">
						<img :src="laohu.imageUrl"></img>
					</view>
				</view>
			</view>

			<view class="haimian">

			</view>
			<view class="footer">
				<Copyright class="banquan"></Copyright>
			</view>
		</view>
	</view>
</template>

<script>
	import Copyright from "@/components/copyright/Copyright";
	export default {
		components: {
			Copyright
		},
		data() {
			return {
				logo: {},
				zhishengji: {},
				guaiwu01: {},
				dianti: {},
				guaiwu02: {},
				qiqiulanzi: {},
				hudie: {},
				guaiwu03: {},
				guaiwu05: {},
				guaiwu04: {},
				qiqiu01: {},
				qiqiu02: {},
				qiqiu03: {},
				qiqiu04: {},
				laohu: {},
				changjinglu: {},
				zhaopin: {},
				qiyezizhi: {},
				banma: {},
				xiong: {},
				title: 'Hello',
				homeVideo: '',
				videoContext: '',
				buttonList: [],
				qiqiuButton: {
					xiaolongdanni: '',
					meilongzhen: '',
					erlingba: '',
					gengduo: '',
					yuanxiaohezuo: '',
					zhaopin: '',
					qiyezizhi: '',
					dakazhibo: '',
					lianxiwomen: '',
					reqiqiu: ''
				}
			}
		},
		onReady: function(res) {
			this.videoContext = uni.createVideoContext('myVideo')
		},
		onLoad() {

		},
		onShow() {
			this.getLogo()
			this.getVideoList()
			this.getHomeVideo()
			this.getButton()
		},
		/* onPageScroll(e) {
			// console.log(e)
			if (e.scrollTop > 1400) {
				console.log(this.videoContext)
				this.videoContext.play()
			} else {
				this.videoContext.pause()
			}
		}, */
		methods: {
			//获取logo
			getLogo() {
				uni.request({
					url: this.$api + '/potato-studio/image/mainImage/list',
					method: 'GET',
					data: {
						pcType: 1,
						pageSize: 100
					}
				}).then(res => {
					console.log('LOGO', res)
					let list = res[1].data.result.records
					this.logo = list.find(res => {
						return res.imageType == 1
					})
					this.zhishengji = list.find(res => {
						return res.imageType == 18
					})
					this.guaiwu01 = list.find(res => {
						return res.imageType == 4
					})
					this.dianti = list.find(res => {
						return res.imageType == 3
					})
					this.guaiwu02 = list.find(res => {
						return res.imageType == 5
					})
					this.qiqiulanzi = list.find(res => {
						return res.imageType == 19
					})
					this.hudie = list.find(res => {
						return res.imageType == 20
					})
					this.guaiwu03 = list.find(res => {
						return res.imageType == 6
					})
					this.guaiwu05 = list.find(res => {
						return res.imageType == 8
					})
					this.guaiwu04 = list.find(res => {
						return res.imageType == 7
					})
					this.laohu = list.find(res => {
						return res.imageType == 21
					})
					console.log('logoOBJ', this.logo)
					console.log('zhishengjiOBJ', this.zhishengji)
					console.log('guaiwu01OBJ', this.guaiwu01)
				})
			},
			//获取按钮列表
			getButton() {
				uni.request({
					url: this.$api + '/potato-studio/button/buttonType/list',
					method: 'GET',
					data: {
						pcType: 1
					}
				}).then(res => {
					console.log('按钮列表', res)
					this.buttonList = res[1].data.result.records
					for (let item of this.buttonList) {
						switch (item.value) {
							case 11:
								this.qiqiuButton.xiaolongdanni = item.beginStatusUrl
								this.qiqiu01 = item
								console.log('小龙丹妮', this.qiqiu01)
								break;
							case 10:
								this.qiqiuButton.meilongzhen = item.beginStatusUrl
								this.qiqiu02 = item
								break;
							case 9:
								this.qiqiuButton.erlingba = item.beginStatusUrl
								this.qiqiu03 = item
								break;
							case 8:
								this.qiqiuButton.gengduo = item.beginStatusUrl
								this.qiqiu04 = item
								break;
							case 16:
								this.qiqiuButton.yuanxiaohezuo = item.beginStatusUrl
								this.changjinglu = item
								break;
							case 22:
								this.qiqiuButton.zhaopin = item.beginStatusUrl
								this.zhaopin = item
								break;
							case 23:
								this.qiqiuButton.qiyezizhi = item.beginStatusUrl
								this.qiyezizhi = item
								break;
							case 18:
								this.qiqiuButton.dakazhibo = item.beginStatusUrl
								this.banma = item
								break;
							case 24:
								this.qiqiuButton.lianxiwomen = item.beginStatusUrl
								this.xiong = item
								break;
							case 25:
								this.qiqiuButton.reqiqiu = item.beginStatusUrl
								break;
							default:
								break;
						}
					}
				})
			},
			getHomeVideo() {
				uni.request({
					url: this.$api + '/potato-studio/video/video/list',
					data: {
						videoType: 2,
						pcType: 1
					},
					method: "GET"
				}).then((res) => {
					this.homeVideo = res[1].data.result.records[0].videoUrl
					console.log('this.videoList', this.videoList)
				})
			},
			//获取视频
			getVideoList() {
				console.log(this.$api)
				uni.request({
					url: this.$api + '/potato-studio/video/video/list',
					method: "GET"
				}).then((res) => {
					// console.log(res)
					this.videoList = res[1].data.result.records
					this.videoUrl = res[1].data.result.records[0].videoUrl
					console.log('this.videoList', this.videoList)
				})
			},
			//团队介绍
			gotoTeam() {
				uni.navigateTo({
					url: '../team/team'
				})
			},
			gotoYuanxiao() {
				uni.navigateTo({
					url: '../yuanxiao/yuanxiao'
				})
			},
			gotoJiaoYu() {
				uni.navigateTo({
					url: '../jiaoxue/jiaoxue'
				})
			},
			gotoAbout() {
				uni.navigateTo({
					url: '../about/about'
				})
			},
			xiaolongdanni() {
				console.log('小龙丹尼')
				uni.navigateTo({
					url: '../video-list/video-list?type=' + 10
				})
			},
			meilongzhen() {
				console.log('梅龙镇')
				uni.navigateTo({
					url: '../video-list/video-list?type=' + 9
				})
			},
			erlingba() {
				console.log('208')
				uni.navigateTo({
					url: '../video-list/video-list?type=' + 8
				})
			},
			moreVideo() {
				console.log('208')
				uni.navigateTo({
					url: '../video-list/video-list?type=' + 11
				})
			},
			qiyeANDzhaopin(type) {
				console.log('企业资质和招聘')
				uni.navigateTo({
					url: '../video-alone/video-alone?type=' + type
				})
			},
			shouyeshipin(type) {
				console.log('首页展示视频')
				// this.videoContext.play()
				uni.navigateTo({
					url: '../video-alone2/video-alone2?type=' + type
				})
			},
			playVideo() {
				this.videoContext.play()
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {

		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.content {
		position: relative;
		background: url('https://qingchenghai-1.oss-cn-hangzhou.aliyuncs.com/static/bg.jpg') no-repeat center top;
		background-size: 100% auto;
	}

	.bofangjian {
		position: absolute;
		width: 50rpx;
		height: 50rpx;
		// background: #ff0000;
		top: 380rpx;
		left: 50%;
		transform: translateX(-50%);
		z-index: 10;

	}

	.logo {

		/* width: 230rpx;
		height: 176rpx; */
		/* background: url('https://qingchenghai-1.oss-cn-hangzhou.aliyuncs.com/static/logo.png') no-repeat center center;
		background-size: 100% 100%; */
		/* margin-top: 574rpx;
		margin-left: 280rpx; */
		// transform: scale(1.3);
		transform: scale(0.7);

		image {
			display: block;

		}

		position: absolute;
	}

	.reqiqiu {
		/* width: 356rpx;
		height: 490rpx; */
		// background: url('https://qingchenghai-1.oss-cn-hangzhou.aliyuncs.com/static/reqiqiu.png') no-repeat center center;
		// background-size: 100% 100%;
		/* margin-top: 726rpx;
		margin-left: 40rpx; */
		z-index: 10;
		animation: sx1 2.6s ease-out infinite;
		position: absolute;
		/* top: 0;
		left: 0; */


		img {
			display: block !important;
			transform: scale(0.5);
		}
	}

	.tuandui-arr {
		width: 750rpx;
		height: 1830rpx;
		background: url('https://qingchenghai-1.oss-cn-hangzhou.aliyuncs.com/static/shucong.png') no-repeat center center;
		background-size: 100% 100%;
		margin-top: 1300rpx;
		position: relative;
		display: flex;
		flex-direction: column;
		/* margin-left: 40rpx; */
	}

	.quanjiafu {
		width: 740rpx;
		height: 858rpx;
		background: url('https://qingchenghai-1.oss-cn-hangzhou.aliyuncs.com/static/quanjiafu.png') no-repeat center center;
		background-size: 100% 100%;
		margin-top: 386rpx;
	}

	.long {
		width: 750rpx;
		height: 912rpx;
		background: url('https://qingchenghai-1.oss-cn-hangzhou.aliyuncs.com/static/long.png') no-repeat center center;
		background-size: 100% 100%;
		margin-top: -716rpx;
		z-index: 10;
		display: flex;
		flex-direction: column;
		position: relative;
	}

	.guaiwu01 {
		/* width: 192rpx;
		height: 128rpx;
		background: url('https://qingchenghai-1.oss-cn-hangzhou.aliyuncs.com/static/guaiwu01.png') no-repeat center center;
		background-size: 100% 100%; */
		/* margin-left: 26rpx;
		margin-top: 114rpx; */
		position: absolute;

		img {
			display: block;
			transform: scale(0.5);
		}

		/* left: 0;
		top: 0; */
	}

	.shu {
		width: 750rpx;
		height: 5144rpx;
		background: url('https://qingchenghai-1.oss-cn-hangzhou.aliyuncs.com/static/shu.png') no-repeat center center;
		background-size: 100% 100%;
		margin: 0 auto;
		margin-top: -724rpx;
		position: relative;
	}

	.dianti {
		position: absolute;

		img {
			display: block;
			transform: scale(0.5);
		}

		/* width: 136rpx;
		height: 556rpx;
		background: url('https://qingchenghai-1.oss-cn-hangzhou.aliyuncs.com/static/dianti.png') no-repeat center center;
		background-size: 100% 100%;
		margin-left: 20rpx;
		margin-top: -20rpx; */
	}

	.shipin {
		width: 726rpx;
		height: 636rpx;
		/* background: url('') no-repeat center center;
		background-size: 100% 100%; */
		/* z-index: 20; */
		left: 24rpx;
		top: 594rpx;
		position: absolute;

		.shipin-box {
			width: 100%;
			height: 100%;
			position: relative;

			.pic-abslo {
				position: absolute;
				width: 100%;
				height: 100%;
				z-index: 2;
			}

			.shipin-v {
				position: absolute;
				width: 608rpx;
				height: 326rpx;
				left: 50rpx;
				top: 272rpx;
			}
		}
	}

	.pic {
		width: 100%;
		height: 100%;
	}

	.fangzi01 {
		width: 750rpx;
		height: 1342rpx;
		background: url('https://qingchenghai-1.oss-cn-hangzhou.aliyuncs.com/static/fangzi01.png') no-repeat center center;
		background-size: 100% 100%;
		margin-top: 643rpx;
	}

	.fangzi02 {
		width: 750rpx;
		height: 2028rpx;
		background: url('https://qingchenghai-1.oss-cn-hangzhou.aliyuncs.com/static/fangzi02.png') no-repeat center center;
		background-size: 100% 100%;
		margin-top: -700rpx;
		position: relative;
	}

	.guaiwu02 {
		/* width: 80rpx;
		height: 208rpx;
		background: url('https://qingchenghai-1.oss-cn-hangzhou.aliyuncs.com/static/guaiwu02.png') no-repeat center center;
		background-size: 100% 100%; */
		position: absolute;

		/* top: 476rpx;
		left: 436rpx; */
		img {
			display: block;
			transform: scale(0.5);
		}
	}

	.qiqiulanzi {
		position: absolute;

		img {
			display: block;
			transform: scale(0.5);
		}
	}

	.huojian {
		width: 374rpx;
		height: 758rpx;
		background: url('https://qingchenghai-1.oss-cn-hangzhou.aliyuncs.com/static/huojian.png') no-repeat center center;
		background-size: 100% 100%;
		margin-top: -426rpx;
		margin-left: 378rpx;
	}

	.zhishengji {
		position: absolute;

		// transform: scale(0.5);
		img {
			display: block;
			transform: scale(0.5);
		}

		/* width: 362rpx;
		height: 298rpx; */
		/* background: url('https://qingchenghai-1.oss-cn-hangzhou.aliyuncs.com/static/zhishengji.png') no-repeat center center;
		background-size: 100% 100%; */
		/* margin-top: -1976rpx;
		margin-left: 12rpx; */
		position: absolute;
		// animation: sx1 1.2s infinite;
	}

	.shuguan {
		width: 255rpx;
		height: 157rpx;
		background: url('https://qingchenghai-1.oss-cn-hangzhou.aliyuncs.com/static/shuguan.png') no-repeat center center;
		background-size: 100% auto;
		position: absolute;
		left: 40rpx;
		top: 230rpx;
	}

	.fangzi03 {
		width: 740rpx;
		height: 930rpx;
		background: url('https://qingchenghai-1.oss-cn-hangzhou.aliyuncs.com/static/fangzi03.png') no-repeat center center;
		background-size: 100% 100%;
		// margin-top: 1030rpx;
		margin-top: -650rpx;
		margin-left: 0rpx;
		position: relative;
		display: flex;
		flex-direction: column;
	}

	.hudie {
		position: absolute;

		img {
			display: block;
			transform: scale(0.5);
		}
	}

	.qiqiu01 {
		/* width: 110rpx;
		height: 656rpx; */
		// background: url('https://qingchenghai-1.oss-cn-hangzhou.aliyuncs.com/static/qiqiu01.png') no-repeat center center;
		// background-size: 100% 100%;
		position: absolute;
		width: 119rpx;
		height: 660rpx;
		/* left: 180rpx;
		top: -192rpx; */
		animation: dx1 2s infinite;
		// transform: scale(0.1);

		img {
			display: block;
			width: 100%;
			// transform: scale(0.5);
		}
	}

	.qiqiu02 {
		width: 151rpx;
		height: 592rpx;
		/* width: 146rpx;
		height: 588rpx; */
		// background: url('https://qingchenghai-1.oss-cn-hangzhou.aliyuncs.com/static/qiqiu02.png') no-repeat center center;
		// background-size: 100% 100%;
		position: absolute;
		/* left: 88rpx;
		top: -124rpx; */
		animation: dx2 2s infinite;

		img {
			display: block;
			width: 100%;
			// transform: scale(0.5);
		}
	}

	.qiqiu03 {
		width: 126rpx;
		height: 497rpx;
		/* width: 116rpx;
		height: 492rpx; */
		// background: url('https://qingchenghai-1.oss-cn-hangzhou.aliyuncs.com/static/qiqiu03.png') no-repeat center center;
		// background-size: 100% 100%;
		position: absolute;
		/* left: 156rpx;
		top: -28rpx; */
		animation: dx1 2.2s infinite;

		img {
			display: block;
			width: 100%;
			// transform: scale(0.5);
		}
	}

	.qiqiu04 {
		width: 128rpx;
		height: 381rpx;
		/* width: 124rpx;
		height: 376rpx; */
		// background: url('https://qingchenghai-1.oss-cn-hangzhou.aliyuncs.com/static/qiqiu04.png') no-repeat center center;
		// background-size: 100% 100%;
		position: absolute;
		/* left: 110rpx;
		top: 88rpx; */
		animation: dx2 2.4s infinite;

		img {
			width: 100%;
			display: block;
			// transform: scale(0.5);
		}
	}

	.guaiwu03 {
		/* width: 140rpx;
		height: 114rpx;
		background: url('https://qingchenghai-1.oss-cn-hangzhou.aliyuncs.com/static/guaiwu03.png') no-repeat center center;
		background-size: 100% 100%; */
		position: absolute;

		/* left: 330rpx;
		top: 348rpx; */
		img {
			display: block;
			transform: scale(0.5);
		}
	}

	.haidaochuan {
		width: 750rpx;
		height: 640rpx;
		background: url('https://qingchenghai-1.oss-cn-hangzhou.aliyuncs.com/static/haidaochuan.png') no-repeat center center;
		background-size: 100% 100%;
		margin-top: -420rpx;
		z-index: 11;
		position: relative;
	}

	.guaiwu05 {
		/* width: 216rpx;
		height: 376rpx;
		background: url('https://qingchenghai-1.oss-cn-hangzhou.aliyuncs.com/static/guaiwu05.png') no-repeat center center;
		background-size: 100% 100%; */
		position: absolute;

		/* top: 80rpx;
		left: 506rpx; */
		img {
			display: block;
			transform: scale(0.5);
		}
	}

	.dongwuqun {

		width: 750rpx;
		height: 1062rpx;
		background: url('https://qingchenghai-1.oss-cn-hangzhou.aliyuncs.com/static/dongwuqun.png') no-repeat center center;
		background-size: 100% 100%;
		margin-top: -246rpx;
		position: relative;
		z-index: 12;
	}

	.changjinglu {

		/* width: 292rpx;
		height: 476rpx; */
		// background: url('https://qingchenghai-1.oss-cn-hangzhou.aliyuncs.com/static/changjinglu.png') no-repeat center center;
		// background-size: 100% 100%;
		position: absolute;

		/* left: 6rpx;
		top: -10rpx; */
		img {
			display: block;
			transform: scale(0.5);
		}

		// animation: sx1 1s infinite;
	}

	@keyframes sx1 {
		0% {
			transform: translateY(0);
		}

		50% {
			transform: translateY(10rpx);
		}

		100% {
			transform: translateY(0);
		}
	}

	@keyframes sx2 {
		0% {
			transform: translateY(0);
		}

		50% {
			transform: translateY(-14rpx);
		}

		100% {
			transform: translateY(0);
		}
	}

	@keyframes dx1 {
		0% {
			transform: scale(1);
		}

		50% {
			transform: scale(1.05);
		}

		100% {
			transform: scale(1);
		}
	}

	@keyframes dx2 {
		0% {
			transform: scale(1);
		}

		50% {
			transform: scale(0.95);
		}

		100% {
			transform: scale(1);
		}
	}

	@keyframes zy1 {
		0% {
			transform: translateX(0);
		}

		50% {
			transform: translateX(10rpx);
		}

		100% {
			transform: translateX(0);
		}
	}

	.zhaopin {

		/* width: 128rpx;
		height: 92rpx; */
		// background: url('https://qingchenghai-1.oss-cn-hangzhou.aliyuncs.com/static/zhaopin.png') no-repeat center center;
		// background-size: 100% 100%;
		position: absolute;
		/* right: 26rpx;
		top: 250rpx; */

		img {
			display: block;
			transform: scale(0.5);
		}

		// animation: sx2 1.2s infinite;
	}

	.guaiwu04 {
		/* width: 132rpx;
		height: 210rpx;
		background: url('https://qingchenghai-1.oss-cn-hangzhou.aliyuncs.com/static/guaiwu04.png') no-repeat center center;
		background-size: 100% 100%; */
		position: absolute;

		/* left: 256rpx;
		top: 184rpx; */
		img {
			display: block;
			transform: scale(0.5);
		}
	}

	.qiyezizhi {
		/* width: 150rpx;
		height: 162rpx; */
		// background: url('https://qingchenghai-1.oss-cn-hangzhou.aliyuncs.com/static/qiyezizhi.png') no-repeat center center;
		// background-size: 100% 100%;
		position: absolute;

		/* left: 220rpx;
		top: 392rpx; */
		img {
			display: block;
			transform: scale(0.5);
		}

		// animation: dx1 1.2s infinite;
	}

	.banma {
		/* width: 260rpx;
		height: 258rpx; */
		// background: url('https://qingchenghai-1.oss-cn-hangzhou.aliyuncs.com/static/banma.png') no-repeat center center;
		// background-size: 100% 100%;
		position: absolute;
		/* left: 0rpx;
		bottom: 116rpx; */

		img {
			display: block;
			transform: scale(0.5);
		}

		// animation: zy1 1s infinite;
	}

	.xiong {
		/* width: 282rpx;
		height: 340rpx; */
		// background: url('https://qingchenghai-1.oss-cn-hangzhou.aliyuncs.com/static/xiong.png') no-repeat center center;
		// background-size: 100% 100%;
		position: absolute;
		/* left: 278rpx;
		bottom: 20rpx; */

		img {
			display: block;
			transform: scale(0.5);
		}

		// animation: sx1 1.2s infinite;
	}

	.laohu {
		/* width: 230rpx;
		height: 190rpx;
		background: url('https://qingchenghai-1.oss-cn-hangzhou.aliyuncs.com/static/laohu.png') no-repeat center center;
		background-size: 100% 100%; */
		position: absolute;

		/* right: 0rpx;
		bottom: 20rpx; */
		img {
			display: block;
			transform: scale(0.5);
		}
	}

	.haimian {

		width: 750rpx;
		height: 364rpx;
		background: url('https://qingchenghai-1.oss-cn-hangzhou.aliyuncs.com/static/haimian.png') no-repeat center center;
		background-size: 100% 100%;
		margin-top: -250rpx;
	}

	.footer {
		width: 750rpx;
		height: 200rpx;
		background: url('@/static/foot.jpg') no-repeat center center;
		background-size: 100% 100%;
		margin-top: 15rpx;
	}

	.banquan {
		position: absolute;
		width: 100%;
		bottom: 6px;
		left: 50%;
		transform: translateX(-50%);

	}
</style>
